<template>
  <PageWrapper contentFullHeight :contentStyle="contentStyle">
    <a-tabs v-model:activeKey="activeKey" @change="handleTabChange" size="small">
<!--      <a-tab-pane tab="文件存储" key="form1">
        <tab1 ref="form1"></tab1>
      </a-tab-pane>
      <a-tab-pane tab="短信配置" key="form2">
        <tab2 ref="form2"></tab2>
      </a-tab-pane>
      <a-tab-pane tab="推送配置" key="form3">
        <tab3 ref="form3"></tab3>
      </a-tab-pane>
      <a-tab-pane tab="即时通讯" key="form4">
        <tab4 ref="form4"></tab4>
      </a-tab-pane>-->
      <a-tab-pane tab='系统配置' key='form100'>
        <tab5 ref="form5"></tab5>
      </a-tab-pane>
    </a-tabs>
  </PageWrapper>
</template>
<script lang="ts" setup name="config">
import {PageWrapper} from '@/components/page'
import {ref, useAttrs, getCurrentInstance, nextTick} from 'vue';
import Tab1 from './components/tab1.vue';
import Tab2 from './components/tab2.vue';
import Tab3 from './components/tab3.vue';
import Tab4 from './components/tab4.vue';
import Tab5 from './components/tab5.vue';
// 声明Emits
const emit = defineEmits(['success', 'register']);
const attrs = useAttrs();
//是否是更新模式
const isUpdate = ref(true);
//是否显示底部按钮
const showFooter = ref(true);
//当前选中tab
const activeKey = ref('form100');
//当前列表编辑数据对象
const record = ref();
const ctx: any = getCurrentInstance();

const contentStyle = {
  backgroundColor: '#ffffff',
  padding: '10px'
}


/**
 * 获取标题
 */
function getTitle() {
  return !isUpdate.value ? '新增角色' : '编辑角色';
}

/**
 * tab切换事件
 */
function handleTabChange() {
  nextTick(() => {
    //ctx.refs[activeKey.value].setData(record.value);
  });
}

/**
 * 确定按钮事件
 */
async function handleOk() {
  try {

    ctx.refs[activeKey.value].handleSubmit((callback) => {
      //执行子组件回调事件
      callback && callback(emit);

    });
  } catch (err) {

  }
}
</script>
